/* If you need to add @import statements, do so up here */

@import "jit-refresh.css"; /* triggers frontend rebuilds */

/* Set up Tailwind imports */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [x-cloak] {
    display: none !important;
  }

  ::-webkit-scrollbar {
    @apply w-1 h-1;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply transition-colors rounded-full	bg-clip-content bg-gray-200;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-300;
  }

  [data-lookbook-embed] {
    @apply rounded-md overflow-hidden shadow-md;
  }

  details {
    @apply cursor-pointer;

    &[open] summary {
      @apply mb-2;
    }
  }

  .link-underline {
    @apply underline !underline-offset-4 decoration-dotted !decoration-gray-400 hover:decoration-solid transition-all;
  }
}

@layer components {
  /* Layout */

  .layout-container {
    @apply grid grid-flow-row overflow-hidden;
    @apply grid-cols-[220px_1fr] xl:grid-cols-[calc(((100vw_-_theme(screens.mx))_/_2)_+_280px)_1fr];

    & .layout-content {
      @apply px-6 lg:px-8;
    }

    & .layout-column:first-child {
      @apply border-r border-transparent flex;
    }

    & .layout-column:first-child .layout-content {
      @apply w-full xl:w-[280px] ml-auto;
    }

    & .layout-column:last-child .layout-content {
      @apply max-w-[1100px] w-full;
    }
  }

  #sidebar {
    @apply pr-4;
  }

  .layout-slat {
    @apply w-full;

    & > * {
      @apply w-full max-w-[theme(screens.mx)] px-6 lg:px-8 mx-auto;
    }
  }

  .layout-slat-grid {
    @apply grid grid-cols-12 grid-rows-1 gap-6 md:gap-8 mx-auto;
  }

  /* Header */

  #site-header {
    & nav {
      @apply items-center justify-end space-x-6;

      & a {
        @apply text-gray-500 flex items-center px-1 space-x-1.5;
        @apply h-12 border-b-2 border-t-2 border-transparent;

        & [data-component="icon"] {
          @apply opacity-70;
        }
      }

      & a.active {
        @apply text-indigo-700 !border-b-indigo-600;
      }

      & a:hover {
        @apply text-gray-700;
      }

      & a:not([target]):hover {
        @apply border-b-indigo-200;
      }
    }
  }

  /* Articles */

  article {
    & [data-component="section"] + [data-component="section"] {
      @apply mt-8 pt-8 border-t border-gray-300;
    }

    & [data-lookbook-embed] + * {
      @apply mt-7;
    }

    & .highlighter-rouge + details {
      @apply -mt-2;
    }

    & [data-component="screenshot"] {
      @apply !my-8;
    }
  }

  .prose code:not(.highlight code) {
    @apply bg-gray-100 inline-block px-1 font-normal !my-0;

    &:before,
    &:after {
      display: none;
    }
  }

  .prose :where(h4):not(:where([class~="not-prose"] *)) {
    @apply mb-4;
  }

  .prose a {
    @apply link-underline;
  }

  /* Homepage */

  .homepage-intro {
    background-image: url("/images/lookbook_bg.svg");
    background-size: 60px 60px;
    background-repeat: repeat;
    background-attachment: fixed;
  }

  .homepage-intro-inner {
    background-image: linear-gradient(
      170deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 30%,
      rgba(255, 255, 255, 0) 60%
    );
  }

  .feature-slat {
    @apply py-14 lg:py-20 relative z-[100] bg-gray-50;
    @apply layout-slat;
  }

  .feature-slat-gradient {
    background-image: linear-gradient(
      150deg,
      rgba(228, 228, 231, 0) 0%,
      rgba(228, 228, 231, 1) 85%,
      rgba(228, 228, 231, 1) 100%
    );
  }

  .feature-slat-icon {
    @apply absolute top-6 left-6;
  }

  .feature-slat + .feature-slat {
    @apply border-t border-gray-300;
  }

  .feature-slat-inner {
    @apply grid grid-cols-1 sm:grid-cols-12 gap-6 md:gap-8 mx-auto;
  }

  .feature-slat-text {
    @apply col-span-1 sm:col-span-10 sm:col-end-12 md:col-span-6 lg:col-span-5 mx:col-span-4 lg:px-6 mx:px-0;
  }

  .feature-slat-figure {
    @apply col-span-1 sm:col-span-10 sm:col-end-12 md:col-span-6 lg:col-span-7;
  }

  .feature-slat-text + .feature-slat-figure {
    @apply md:col-end-13;
  }

  .feature-slat-figure + .feature-slat-text {
    @apply md:col-end-13;
  }

  .feature-slat-text > div {
    @apply lg:sticky lg:top-4 lg:pt-4 lg:pb-4;
  }

  .feature-slat-title {
    @apply text-2xl sm:text-3xl font-extralight !leading-tight mb-6 relative;
  }

  .feature-slat-badge {
    @apply inline-block px-1.5 py-1 rounded-lg bg-emerald-500 text-white text-[10px] tracking-wider font-semibold uppercase leading-none absolute top-0 ml-2 shadow;
  }

  .homepage-cta {
    background-image: url("");
    background-size: 60px 60px;
    @apply bg-repeat;
  }

  .homepage-cta {
    background-image: url("/images/lookbook_bg.svg");
    background-size: 60px 60px;
    background-repeat: repeat;
    background-attachment: fixed;
  }

  .homepage-cta-inner {
    background-image: linear-gradient(
      80deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 25%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.8) 75%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}
